<template>
	<view class="container">
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left" title="订单消息" :border='false' :shadow='false' @clickLeft="back" />
		</view>
		<view class="" style="margin-top: 116rpx;">
			<view v-for="(item, index) in messageList" :key="index" class="message-card">
				<view class="" style="text-align: center;color: #999;">
					{{item.time}}
				</view>
				<uni-card :title="item.title" :sub-title="item.content" :thumbnail="avatar" @click="onClick"
					:border="false" :is-shadow='false'>
					<template #title style="">
						<view style="font-weight: bold;margin-top: 20rpx;margin-left: 20rpx;">{{item.title}}</view>
						<view
							style="color: #999; font-size: 26rpx; margin-top: 20rpx;margin-left: 20rpx;border-bottom:1px solid #f4f3f6 ;padding-bottom: 20rpx;">
							{{item.content}}
						</view>
					</template>
					<text class="uni-body">
						<text style="color:#999;font-size: 10rpx; width: 80%;">订单号：{{item.orderNumber}}</text>
						<!-- <text class="bottomList"> -->
						<text style="color:#007aff;font-size: 10rpx;margin-left: 185rpx;" @click="back">查看详情</text>
						<uni-icons class="icon" type="right" size="15" color="#999"></uni-icons>
						<!-- </text> -->
					</text>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	let messageList = ref([{
			title: '订单支付提醒',
			time: '2098-11-25 11:42:05',
			content: '故宫博物馆成人票，尚未完成支付，即将取消。',
			orderNumber: '231125173310086'
		},
		{
			title: '订单预订成功',
			time: '2098-11-25 11:40:25',
			content: '故宫博物馆成人票*1份，2098-11-26 待使用。',
			orderNumber: '231125173310080'
		},
		{
			title: '订单已使用',
			time: '2098-11-20 12:20:49',
			content: '故宫博物馆成人票*1份，2098-11-20 已使用。欢迎再次预订。',
			orderNumber: '231120173510086'
		},
		{
			title: '订单退订成功',
			time: '2098-11-19 18:20:29',
			content: '故宫博物馆成人票，退订金额：¥50.00（含保险金额：¥10.00），将于1-7个工作日退至原支付账户。',
			orderNumber: '231119173010506'
		}
	])
	const viewDetails = (orderNumber) => {
		// 这里可以添加查看详情的逻辑，例如跳转到订单详情页面
		console.log('查看订单详情:', orderNumber);
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	.container {
		/* padding: 10px; */
	}

	.box-bg {
		position: fixed;
		width: 100%;
		top: 0;
	}

	.message-card {
		margin-bottom: 10rpx;
		margin-top: 20rpx;
	}

	.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title[data-v-ae4bee67] {
		font-weight: 900;
	}

	.uni-ellipsis[data-v-ae4bee67] {

		font-weight: 900;
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.uni-card--border[data-v-ae4bee67] {
		border: none;

	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.message-body {
		margin-bottom: 20rpx;
	}

	.content {
		font-size: 28rpx;
		color: #333;
	}

	.order-number {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.message-footer {
		text-align: right;
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.look {
		display: flex;
		align-items: center;

	}

	.title {
		color: #007aff;
		border: none;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		cursor: pointer;
	}

	.detail-button:hover {
		background-color: #005bb5;
	}

	.uni-body {}

	.bottomList {
		display: flex;
		align-items: center;
	}
</style>